<template>
	<view class="page">
		<view class="logo-wrap">
			<image class="logo" src="/static/logo.jpg" mode="aspectFill"></image>
			<view class="slogan">让生活更美好</view>
		</view>

		<view class="fs-full">
			<fui-card>
				<view class="fs-p24 fs-flex fs-justify__center fs-size__36">账号登录</view>
				<fui-form ref="form">
					<fui-form-item :bottom-border="false" :padding="['20rpx', '30rpx']">
						<fui-input radius="16" v-model:modelValue="formState.username" type="number"
							placeholder="请输入您的账号" background-color="#F3F6FC" :padding="['25rpx', '32rpx']"
							maxlength="11">
							<template v-slot:left>
								<fui-icon name="mobile" :size="44" style="margin-right: 16rpx" />
							</template>
						</fui-input>
					</fui-form-item>
					<fui-form-item :bottom-border="false" :padding="['20rpx', '30rpx']">
						<fui-input v-model:modelValue="formState.password" :password="password" placeholder="请输入密码"
							background-color="#F3F6FC" :padding="['25rpx', '32rpx']">
							<template v-slot:left>
								<fui-icon name="lock" :size="44" style="margin-right: 16rpx" />
							</template>
							<fui-icon :name="password ? 'invisible' : 'visible'" color="#B2B2B2" :size="44"
								@click="change"></fui-icon>
						</fui-input>
					</fui-form-item>
					<view class="fs-flex fs-justify__between fs-size__30 fs-px30 fs-color__label">
						<navigator url="/pages/forget/forget">忘记密码？</navigator>
						<navigator url="/pages/register/register">去注册</navigator>
					</view>
					<fui-form-item :bottom-border="false">
						<fui-button :loading="loading" @click="handleLogin" background="#4282FF"
							radius="48rpx">登录</fui-button>
					</fui-form-item>
				</fui-form>
				<view class="fs-p24"></view>
			</fui-card>
		</view>
	</view>

	<view class="footer-fixed">
		<view class="copyright">
			<text @click="contact('18599719996')">新疆幻思信息科技有限公司技术支持</text>
		</view>
		<fui-safe-area background="#f2f2f2"></fui-safe-area>
	</view>

	<fui-load-ani v-if="loading" type="3" isFixed maskColor="rgba(0,0,0,0.1)"></fui-load-ani>
</template>

<script setup>
	import { ref } from 'vue';
	import { useUserStore } from '../../stores/user';
	import { fetchLogin, fetchUserinfo } from '@/common/api/index.js';
	import { onShareAppMessage } from '@dcloudio/uni-app'

	const loading = ref(false);
	const password = ref(true);
	const formState = ref({
		username: '',
		password: ''
	});

	function change() {
		password.value = !password.value;
	}

	const form = ref(null);
	const rules = [
		{ name: 'username', rule: ['required'], msg: ['请输入您的账号'] },
		{ name: 'password', rule: ['required'], msg: ['请输入密码'] }
	];
	const { setUserinfo } = useUserStore();
	// 登录
	async function handleLogin() {
		form.value.validator(formState.value, rules).then(async (res) => {
			if (res.isPassed) {
				loading.value = true;
				const { success } = await fetchLogin(formState.value).catch(() => {
					loading.value = false;
				});
				if (success) {
					const result = await fetchUserinfo();
					if (result.success && result.data) {
						setUserinfo(result.data);
					}
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
				loading.value = false;
			}
		});
	}

	onShareAppMessage(() => {
		return {
			title: '捷报Hub'
		}
	})
</script>

<style lang="scss">
	page {
		width: 100%;
		padding-top: 60rpx;
	}

	.logo-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;

		.logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
		}

		.slogan {
			margin-top: 20rpx;
			font-size: 14px;
			color: #666666;
			text-align: center;
		}
	}
</style>